<div class="view">
  <input class="toggle" type="checkbox" [(ngModel)]="todo.completed" (ngModelChange)="onCompletedClicked()">
  <label *ngIf="!todo.editing" (dblclick)="onItemDoubleClicked()">{{ todo.content }}</label>
  <button class="destroy" (click)="onDeleteClicked()"></button>
</div>
<input *ngIf="todo.editing" #edit class="edit"
       (click)="onEditClicked($event)"
       [(ngModel)]="todo.content"
       (keyup.enter)="finishEditing()"
       (keyup.escape)="cancelEditing()"
/>


<!--<li class="completed">-->
<!--  <div class="view">-->
<!--    <input class="toggle" type="checkbox" checked>-->
<!--    <label>Taste JavaScript</label>-->
<!--    <button class="destroy"></button>-->
<!--  </div>-->
<!--  <input class="edit" value="Create a TodoMVC template">-->
<!--</li>-->
<!--<li>-->
<!--  <div class="view">-->
<!--    <input class="toggle" type="checkbox">-->
<!--    <label>Buy a unicorn</label>-->
<!--    <button class="destroy"></button>-->
<!--  </div>-->
<!--  <input class="edit" value="Rule the web">-->
<!--</li>-->
